<template>
  <div class="bank_list">
    <Row :gutter="16" class="top_warp">
      <Col span="3" offset="21" class="cityList_moudle_footer">
        <Button type="primary" @click="onAdd" v-if="unlocking('0102011101')">上传</Button>
      </Col>
    </Row>
    <Tabs type="card" v-model="tabName" name="dataType" @on-click="onTab">
      <TabPane v-for="tab in tabs" tab="dataType" :key="tab.key" :label="tab.value" :name="tab.key"></TabPane>
    </Tabs>
    <dt-grid ref="table" :onFetch="onFetch" page />
    <!-- 编辑弹窗 -->
    <edit-modal ref="edit" @success="onSuccess" />
  </div>
</template>

<script>
  import column from './biz/columns'
  import dt from '@dt/dt'
  import editModal from './components/edit.vue'
  import mgr from './biz'

  export default {
    data() {
      let tabs = dt.dictInfo().housesDataType //bonusSettlementType
      return {
        tabs,
        tabName: tabs[0].key
      }
    },
    components: { editModal },
    methods: {
      onFetch(data) {
        data.dataType = this.tabName
        return mgr.list(data)
      },
      onSuccess(type) {
        this.tabName = type
        this.$refs.table.fetch()
      },
      onTab() {
        this.$refs.table.fetch()
      },
      //编辑 新建
      onAdd() {
        this.$refs.edit.show()
      },
      edit(obj) {
        this.$refs.edit.show(obj)
      },
      //删除
      remove(obj) {
        this.$Modal.confirm({
          title: '确认删除该案场资料？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            mgr.remove(obj.housesDataId).then((res) => {
              this.$Message.success('删除成功')
              this.onSuccess()
            })
          }
        })
      }
    },
    mounted() {
      this.$refs.table.init(this, new column(this))
      this.$refs.table.fetch()
    }
  }
</script>
<style lang="scss" scoped>
  .bank_list {
    .top_warp {
      margin-bottom: 20px;

      .total_num {
        font-size: 18px;
      }
    }

    .cityList_moudle_footer {
      display: flex;
      justify-content: space-around;
    }
  }
</style>
